<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>admin</title>
	<link rel="stylesheet" href="">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/admin.css">
    <style type="text/css">
    input.editintput{
        border: none;
        border-bottom: 1px solid #888;
        width: 120px;
        padding-left: 5px;
    }
    input.editintput:focus{
        outline: none;  
        border-bottom: 1px solid #888;
    }
    input.editintput[disabled]{
        background-color: white;
    }
    .editBox{
        font-weight: bold;
        color: red;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading panel-heading-custom">
                        <h3 class="panel-title panel-title-custom">
                            <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 入库单据
                            <span style="float:right;">
                             <button id="excBtn" class="btn btn-info" type="button">提交</button>
                             </span>
                        </h3>
                    </div>
                    <div class="table-responsive">
                    <form id="frm" action="/admin/update" method="post" accept-charset="utf-8">
                        <div style="text-align:center;"><h3>百货商品入库单</h3></div>
                        <div style="padding: 10px; ">
                            <div style="float: left;">经手人：<input type="text" name="person" class="editintput"></div>
                            <div style="float: right;">日期：<input type="text" name="date" class="editintput" readonly="readonly" value="<?php echo date('Y-m-d',time())?>"></div>
                            <div style="clear: both;"></div>
                        </div>
                     {{ csrf_field() }}
                        <table id="taData" class="table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>商品编码</th>
                                <th>商品名称</th>
                                <th>型号</th>
                                <th>颜色</th>
                                <th>数量</th>
                                <th>单价(元)</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><span>1<span></td>
                            <td><input type="text" class="editintput" name="barcode[]"></td>
                            <td><span></span><input type="hidden" name="name[]"></td>
                            <td><span name="type[]"><span></td>
                            <td><span name="color[]"><span></td>
                            <td><input minlength="1" maxlength="6" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'')" style="width: 80px;" type="text" class="editintput" name="num[]"></td>
                            <td><span style="color:red;">￥</span><span name="price[]"><span></td>
                        </tr>
                        </tbody>
                    </table>
                    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
$("table input.editintput").bind('keydown',function(event) {
    /* Act on the event */
     var keyNum = event.which;   //获取键值
     //var index=$(this).index("table input.editintput:not(:disabled)");
     //console.log(keyNum);
     // var obindex=Math.abs(index-1);
     //$("table input.editintput:not(:disabled)").eq(obindex).focus();
     if(keyNum==37){
        $("table input.editintput:not(:disabled)").eq(0).focus();
     }
     else if(keyNum==39){
         $("table input.editintput:not(:disabled)").eq(1).focus();
     }
     //console.log(obindex);
     //console.log(keyNum);
});
var obj=$("input[name='barcode[]']"),barCodeArr=[];
$(obj).eq(0).focus();
$(obj).bind("keydown",function(){
  if(event.keyCode==13)
  {
    var data=['测试商品00','xxx','红色'];
    createDataTr(this,data);
    getTotalNum();
  }
});
function createDataTr(obj,data){
    var index=$(obj).index("input[name='barcode[]']");
    var getObjVal=$(obj).val();
    if(!getObjVal){return false;}
    console.log($.inArray(getObjVal,barCodeArr));
    var getIndex=$.inArray(getObjVal,barCodeArr);
    if(getIndex>=0)
    {
         var getcell=$("table#taData").find('tr').eq(getIndex+1).find('td').eq(5).find('input');
         var getInfoCell=$("table#taData").find('tr').eq(getIndex+1).find('td').eq(1).find('input');
         getcell.val(parseInt(getcell.val())+1);
         $("input[name='num[]']").attr('disabled','true');
         getcell.removeAttr('disabled');
         $("input[name='barcode[]']").removeClass('editBox');
         getInfoCell.addClass('editBox');
         $(obj).parents('tr').find('td').eq(5).find('input').removeAttr('disabled');
         $(obj).val('');
         $(obj).focus();
    }
    else{
        console.log(getObjVal);
        barCodeArr.push(getObjVal);
        console.log(barCodeArr);
        console.log("index:"+index);
        var objtd=$(obj).parents('tr').find('td');
        var newtr=$(obj).eq(0).parents('tr').clone(true);
        objtd.eq(1).find('input').attr('disabled','true');
        var tdval=parseInt(index)+2;
        console.log("num:"+tdval);
        newtr.find('td').eq(0).find('span').text(tdval);
        newtr.find('td').eq(1).find('input').val('');
        newtr.find('td').eq(2).find('span').text('');
        newtr.find('td').eq(3).find('span').text('');
        newtr.find('td').eq(4).find('span').text('');
        newtr.find('td').eq(5).find('input').val('');
        newtr.find('td').eq(6).find('span').eq(2).text('');

        objtd.eq(2).find('span').text(data[0]+(index+1));
        objtd.eq(2).find('input').val(data[0]+(index+1));
        objtd.eq(3).find('span').text(data[1]+(index+1));
        objtd.eq(4).find('span').text(data[2]);
        objtd.eq(5).find('input').val(1);
        objtd.eq(6).find('span').eq(2).text(100+index);
        $("input[name='num[]']").attr('disabled','true');
        $("input[name='barcode[]']").removeClass('editBox');
        $(obj).parents('tr').after(newtr);
        $(obj).parents('tr').find('td').eq(1).find('input').addClass('editBox');
        $(obj).parents('tr').find('td').eq(5).find('input').removeAttr('disabled');
        $(obj).parents('tr').next('tr').find('td').eq(1).find('input').removeAttr('disabled');
        $(obj).parents('tr').next('tr').find('td').eq(5).find('input').removeAttr('disabled');
        $(obj).parents('tr').next('tr').find('td').eq(1).find('input').focus();
        console.log("len:"+ $("tr").length);
     }
}
function getTotalNum(){
    var total=0;
    var obj=$("input[name='num[]']");
    $.each(obj, function(index, val) {
        var getval=obj.eq(index).val();
        if(getval){
       total+=parseInt(obj.eq(index).val());
      }
    });
return total;
}

$("#excBtn").click(function(){
    $("#frm input").removeAttr('disabled');
    $("#frm").submit();
});
</script>